<template>
  <DataTable url="role/list" ref="ds">
    <template #tools="table">
      <Button icon="jeicon-add" color="primary" @click="add"><Lang zh="新增"/></Button>
    </template>
    <template #default="table">
      <Table :datas="table.data" :loading="table.loading">
        <TableItem :title="$t('序号','Serial')" prop="$serial" :width="50" align="center"></TableItem>
        <TableItem :title="$t('角色','RoleName')" prop="name"></TableItem>
        <TableItem :title="$t('编码','Code')" prop="sn"></TableItem>
        <TableItem :title="$t('类型','RoleType')" prop="roleType" dict="BranchType"></TableItem>
        <TableItem :title="$t('数据权限','DataScope')" prop="scope" dict="DataScope"></TableItem>
        <TableItem title=" " width="280px">
          <template #default="{data}">
            <LinkButtons limit="4">
              <Button  @click="edit(data)"><Lang zh="编辑"/></Button>
              <Poptip class="h-btn" :content="$t('确定删除所选记录？')" @confirm="del(data)">
                <Button><Lang zh="删除"/></Button>
              </Poptip>
              <Button @click="showRole(data)"><Lang zh="权限范围" en="Permission"/></Button>
              <Button @click="toShowRoleUser(data)"><Lang zh="权限用户" en="Users"/></Button>
            </LinkButtons>
          </template>
        </TableItem>
      </Table>
    </template>
  </DataTable>
  <Modal v-model="showRoleTable" type="drawer-right" :closeOnMask="false">
    <div class="list-page" style="width: 650px;padding:0">
      <RolePermission :role="currentRole" :allPermission="allPermission" @close="showRoleTable=false"/>
    </div>
  </Modal>
  <Modal v-model="showRoleUser" type="drawer-right" :closeOnMask="false">
    <div class="list-page" style="width: 650px;padding: 0">
      <RoleUser :role="currentRole" @close="showRoleUser=false"/>
    </div>
  </Modal>

  <RoleDialog ref="dlg" @change="reload">
  </RoleDialog>
</template>
<script>
import {DataSource, ajax, util} from 'framework'
import RoleDialog from './roleDialog.vue'
import RolePermission from "./rolePermission.vue";
import RoleUser from "./roleUser.vue";
import Dialog from "../coms/Dialog.vue";
import {$t} from 'i18n'
export default {
  name: "Role",
  components: {Dialog, RoleUser, RolePermission, RoleDialog},
  data() {
    return {
      showRoleTable:false,
      showRoleUser:false,
      selects: [],
      allPermission: [],
      currentRole: null,
      tabs: {
        permission: '权限配置',
        user: '用户配置'
      },
      selectedTab: 'permission'
    }
  }, mounted() {

    ajax.get("role/all_permission").then(r => {
      this.allPermission = r.data
    })
  },
  methods: {
    $t,
    reload() {
      this.selects = []
      this.$refs.ds.load()
    },
    search() {
      this.selects = []
      this.$refs.ds.pagination.page = 1;
      this.$refs.ds.load()
    },
    rowSelect(v) {
      this.selectRow = util.fields(v, 'sn')
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'sn'))
    },
    add() {
      this.$refs.dlg.show()
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.edit(this.selects[0])
    },
    edit(v) {

      this.$refs.dlg.show(util.fields(v, 'sn'))
    },
    del(data) {
      ajax.post('role/delete',[data]).then(r => {
        this.reload()
      })
    },
    showRole(dt) {
      //console.log(dt)
      this.showRoleTable=true
      this.currentRole = dt
    },
    toShowRoleUser(dt){
      this.showRoleUser=true
      this.currentRole = dt
    }
  }
}
</script>
